<template>
    <div>

<el-card style>
<el-form inline>
            <!-- <el-form-item label="简称:" class="mgb-0">
              <el-input v-model="fname"></el-input>
            </el-form-item>
            <el-form-item label="编码:" class="mgb-0">
              <el-input v-model="fnumber"></el-input>
            </el-form-item> -->
           <el-row>

<el-col :span="12">

  <el-form-item label="汇报日期:" class="mgb-0">
      <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd">
    </el-date-picker>
            </el-form-item>
    
</el-col>
<el-col :span="8">
<el-form-item label="生产单编码:" class="mgb-0">
              <el-input v-model="fworkordernumber"></el-input>
            </el-form-item>
</el-col>
          <el-col :span="4">
<el-form-item class="mgb-0">
              <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
              <el-button type="success" icon="el-icon-refresh" @click="clearData"></el-button>
            </el-form-item>
            </el-col>
            </el-row>
            <el-form-item label="显示关闭工单:" class="mgb-0">
  <el-switch v-model="fisdelete" active-color="primary"  inactive-color="info"  active-value="1" inactive-value="0"/>
</el-form-item>
          </el-form>

</el-card>
       
        
<el-card style="margin-top: 10px">
         <div>

    <div style="margin-bottom: 10px">
          <el-button type="success" @click="openAdd" >新建</el-button>
          <el-button type="primary" @click="batchEnable(1)">审核</el-button>
          <el-button type="warning" @click="batchEnable(0)" >反审核</el-button>
              <el-button type="danger" @click="remove()">删除</el-button>
        </div>

 <el-table border :data="dataList" v-loading="tableLoading" ref="iTable1" @row-click="handleRowClick">
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column label="汇报时间" prop="fbizdate" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="生产单编码" prop="fworkordernumber" align="center" show-overflow-tooltip></el-table-column>
            
            <el-table-column label="第三方id" prop="foid" align="center" show-overflow-tooltip v-if="false"></el-table-column>
            <el-table-column label="汇报单状态" prop="fstatus" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                <el-tag v-if="scope.row.fstatus =='暂存'" type="success">暂存</el-tag>
                <el-tag v-if="scope.row.fstatus =='审核'" type="primary">审核</el-tag>
                <el-tag v-if="scope.row.fstatus =='自动关闭'" type="danger">自动关闭</el-tag>
              </template>

             </el-table-column>
            <el-table-column label="生产单状态" prop="fworkorderstatus" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                <el-tag v-if="scope.row.fworkorderstatus =='暂存'" type="success">暂存</el-tag>
                <el-tag v-if="scope.row.fworkorderstatus =='审核'" type="primary">审核</el-tag>
                <el-tag v-if="scope.row.fworkorderstatus =='下达'" type="primary">下达</el-tag>
                <el-tag v-if="scope.row.fworkorderstatus =='手动关闭'" type="danger">手动关闭</el-tag>
                <el-tag v-if="scope.row.fworkorderstatus =='自动关闭'" type="danger">自动关闭</el-tag>
              </template>

             </el-table-column>
            <el-table-column label="原料名称" prop="fmaterialname" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="原料规模" prop="fmaterialmodel" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="合格数量" prop="fgoodqty" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="不合格数量" prop="fbadqty" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="汇报数量" prop="fdoneqty" align="center" show-overflow-tooltip>
            </el-table-column>
            
           
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                <el-button type="text" @click.stop="openDetail(scope.row.fid)">详情</el-button>
                <el-button type="text" v-if="scope.row.fstatus =='暂存'" @click.stop="openEdit(scope.row.fid)">编辑</el-button>
              </template>
            </el-table-column>

          </el-table>
<el-pagination style="float:right; margin: 10px 0;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 15, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" prev-text="上一页" next-text="下一页" :total="totalRows">
          </el-pagination> 
     </div>
      </el-card>
         <ReportAdd v-if="isShowReportAddEdit" :fid="fid" :operation="operation" :isview="isview" @close="closeAddEdit" @notRefresh="notRefresh"></ReportAdd>
    </div>

</template>

<script>
import ReportApi from "@/api/xuSimpleWork/ReportApi"
export default 
  {
     name: 'xuReport',
     components: {
       ReportAdd: resolve => require(['./components/report_add'], resolve),
    },
     data(){
        return {
          value1:'',
        isview: false,
        tableLoading: false,
        dataList: [],
        page: 1, //当前页面
        pageSize: 10, // 当前页数
        totalRows: 0, // 总条数
        services: new ReportApi(),
        isShowReportAddEdit: false,
        materialData:{},
        fisdelete:'',
        fworkordernumber:''
         }
     },
async created () {
    this.tableLoading = true;
    this.getData();
  },
    methods :{
    getData () {
      this.tableLoading = true
      let data = {
        pageSize: this.pageSize,
        page: this.page,
        fisdelete: this.fisdelete,
         fstartdate: this.value1[0],
        fenddate: this.value1[1],
        fworkordernumber :this.fworkordernumber,
      }
      this.services.queryListPage(data).then(res => {
        this.dataList = res.data.rows
        this.page = res.data.page
        this.pageSize = res.data.pageSize
        this.totalRows = res.data.totalRows
        this.tableLoading = false
      })
    },
     remove(){
      var fids = this.getSelectIdByTable();
      if (fids.length == 0) {
        this.$message.error('未选中数据!')
      } 
      else {
        const loading = this.$loading({
          lock: true,
          text: `批量操作中，请耐心等待.....`,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.services.remove({ "fid":fids}).then(res => {
          this.$tie.showSuccess(res.message)
          loading.close();
          this.getData();
        }).catch(e => {
          loading.close();
        })
      }
    },
     openAdd () {
      this.fid = null
      this.isview = false
      this.operation = 'add'
      this.isShowReportAddEdit = true
    },
     openEdit (id) {
      this.fid = id
      this.isview = false
      this.operation = 'edit'
      this.isShowReportAddEdit = true
    },
    openDetail (id) {
      this.fid = id
      this.isview = true
      // this.isShowDetail = true
      this.operation = 'view'
      this.isShowReportAddEdit = true
    },
    batchEnable (status) {
      var fids = this.getSelectIdByTable();
      if (fids.length == 0) {
        this.$message.error('未选中数据!')
      } else {
        const loading = this.$loading({
          lock: true,
          text: `批量操作中，请耐心等待.....`,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.services.batchChangeStatus({ "fid": fids, "fstatus": status }).then(res => {
          this.$tie.showSuccess(res.message)
          loading.close();
          this.getData();
        }).catch(e => {
          loading.close();
        })
      }
      this.getData()
    },
    closeAddEdit () {
      this.isShowReportAddEdit = false
      this.fid = ''
      this.getData()
    },
    notRefresh () {
      this.isShowReportAddEdit = false
      this.fid = ''
    },
    getSelectIdByTable () {
      var batchChoose = this.$refs.iTable1.selection;
      var fids = [];
      for (var i = 0; i < batchChoose.length; i++) {
        fids[i] = batchChoose[i].fid;
      }
      return fids;
    },
     searchData () {
      this.page = 1
      this.getData()
    },
    clearData () {
    this.value1 = '',
    this.fworkordernumber = ''
    },
     handleRowClick (row, column, event) {
      this.$refs.iTable1.toggleRowSelection(row)
    },
    handleCurrentChange (page) {
      this.page = page
      this.getData()
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.getData()
    },
     }
  }
</script>
<style scoped lang="scss" >
/deep/.tree-scroll {
  height: 93%;
  overflow: scroll;
}
/deep/ .el-card__body {
  height: 100%;
}
</style>